<template>
    <div>
        <!--style="position: absolute;"-->
        <div class="tools-menu">
            <el-row class="tools-menu-row">
                <el-tooltip class="item" effect="dark" content="图层列表" placement="top">
                    <el-button icon="el-icon-files" circle @click="showContent(0)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="添加图层" placement="top">
                    <el-button icon="el-icon-circle-plus-outline" circle @click="showContent(1)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="场景设置" placement="top">
                    <el-button icon="el-icon-wind-power" circle @click="showContent(2)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="裁剪分析" placement="top">
                    <el-button icon="el-icon-wind-power" circle @click="showContent(3)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="三维分析" placement="top">
                    <el-button icon="el-icon-odometer" circle @click="showContent(4)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="地形" placement="top">
                    <el-button icon="el-icon-odometer" circle @click="showContent(5)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="三维量算" placement="top">
                    <el-button icon="el-icon-wind-power" circle @click="showContent(6)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="在线绘制" placement="top">
                    <el-button icon="el-icon-odometer" circle @click="showContent(7)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="场景切换" placement="top">
                    <el-button icon="el-icon-guide" circle @click="showContent(8)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="空间查询" placement="top">
                    <el-button icon="el-icon-thumb" circle @click="showContent(9)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="场景分享" placement="top">
                    <el-button icon="el-icon-share" circle @click="showContent(10)"></el-button>
                </el-tooltip>
            </el-row>
        </div>


        <!--图层列表-->
        <layer-list></layer-list>

        <!--场景切换-->
        <switch-scene class="tools-content"></switch-scene>

        <!--场景分享-->
        <share-scene class="tools-content"></share-scene>
    </div>
</template>

<script>
import LayerList from "@/components/MenuContent/LayerList/LayerList";
import store from "@/store/store";
import SwitchScene from "../../components/MenuContent/SwitchScene/SwitchScene";
import ShareScene from "../../components/MenuContent/ShareScene/ShareScene";

export default {
  name: "ToolsMenu",
  data(){
    return {
      sharedState: store.state
    };
  },
  components: {
    ShareScene,
    SwitchScene,
    LayerList
  },
  methods: {
    showContent(item){
      console.log("item", item);
      this.sharedState.setContentShowListAction(item);
    }
  }
};
</script>

<style lang="less" scoped>
    @default-background: #fff;
    @default-font-size: 20px;

    .tools-menu {
        position: absolute;
        z-index: 1;
        top: 20px;
        left: 20px;
        background: transparent;
        /*font-size: 200%;*/
    }

    .tools-menu-row {
        background: @default-background;
        padding: 5px 10px;
        border-radius: 10px;
    }

    .el-button {
        font-size: 20px;
    }

    /*工具内容*/
    .tools-content{
        position: absolute;
        z-index: 1;
        top: 100px;
        right: 20px;
        margin-top: 20px;
        border-radius: 5px;
        background: @default-background;
        padding: 10px;
        /*style="background: #ffffff; right: 20px;"*/
    }
</style>
